<template>
  <el-table-column v-bind="computedBind" v-if="['selection', 'expand'].indexOf(computedBind.type) > -1">
    <template v-if="computedBind.type === 'expand'" #default="props">
      <component :is="renderExpand(props)"></component>
    </template>
  </el-table-column>
  <el-table-column v-bind="computedBind" v-else>
    <template #header>
      <BsTableHeaderContent :column="column"/>
    </template>
    <template #default="scope">
      <template v-if="computedChildren && computedChildren.length">
        <bs-table-column v-for="(item, index) in computedChildren" :key="index" :column="item"/>
      </template>
      <BsTableContent :column="column" :scope="scope" :key="contentKey(scope, column)" />
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import BsTableHeaderContent from './BsTableHeaderContent.vue'
import BsTableContent from './BsTableContent.vue'

type ColumnProps = {
  column: ColumnItem
}

const props = withDefaults(defineProps<ColumnProps>(), {
})


const computedChildren = computed(() => {
  return props.column.children
})

const computedBind = computed(() => {
  const obj:any = {
    showOverflowTooltip: true,
    resizable: true,
    ...props.column
  }
  delete obj.bodyOptions
  delete obj.children
  return obj
})

const contentKey = (scope:any, column:any) => {
  return scope.row._XID + '&#' + column.prop
}

const renderExpand = (opts: any) => {
  const {row, $index} = opts
  if (props.column.renderExpand) {
    return props.column.renderExpand(row, $index)
  } else {
    return () => ''
  }
}

</script>

<style lang="scss" scoped>
</style>